<template>
 <div id='winter' @mouseenter='handleMouseEnter' @mouseout='handleMouseOut' @mousemove='handleMouseMove'>
   <div class='view'>
     <img src='@/assets/banner/winter-view-1.jpg' class="morning" alt="morning">
     <img src="@/assets/banner/winter-view-2.jpg" class="afternoon" alt="afternoon">
     <video autoplay loop muted class="evening">
       <source src="@/assets/banner/winter-view-3.webm" type="video/webm">
     </video>
     <img src="@/assets/banner/winter-view-3-snow.png" class="window-cover" alt="window-cover">
   </div>
   <div class='tree'>
     <img src="@/assets/banner/winter-tree-1.png" class="morning" alt="morning">
     <img src="@/assets/banner/winter-tree-2.png" class="afternoon" alt="afternoon">
     <img src="@/assets/banner/winter-tree-3.png" class="evening" alt="evening">
   </div>
 </div>
</template>

<script lang='ts'>
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'Winter',
  setup(){
    const reactiveData = reactive({
      startingPoint: '' as any
    })
    const handleMouseEnter = (event: MouseEvent) => {
      const header:any = document.getElementById('winter')
      reactiveData.startingPoint = event.clientX
      header.classList.add('moving')
    }
    const handleMouseOut = () => {
      const header:any = document.getElementById('winter')
      header.classList.remove('moving')
      header.style.setProperty('--percentage', '0.5')
    }
    const handleMouseMove = (event: MouseEvent) => {
      const header:any = document.getElementById('winter')
      let percentage = (event.clientX - reactiveData.startingPoint) / window.outerWidth + 0.5
      header.style.setProperty('--percentage', String(percentage))
    }
    return{
      handleMouseEnter,
      handleMouseOut,
      handleMouseMove
    }
  }
})
</script>

<style scoped>
#winter{
    height: 160px;
    position: relative;
    overflow: hidden;
    margin: 1.5rem 0;
    --percentage: 0.5;
    border-radius: var(--radius);
    cursor: pointer;
}
#winter .view, #winter .tree {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#winter img, #winter video {
    position: absolute;
    display: block;
    width: 120%;
    max-width: none !important;
    height: 100%;
    object-fit: cover;
}

#winter .morning {
    z-index: 20;
    opacity: calc(1 - (var(--percentage) - 0.25) / 0.25);
}

#winter .afternoon {
    z-index: 10;
    opacity: calc(1 - (var(--percentage) - 0.5) / 0.5);
}

#winter .view {
    transform: translatex(calc(var(--percentage) * 100px));
}

#winter .tree {
    transform: translatex(calc(var(--percentage) * 50px));
    filter: blur(3px);
}

#winter .view,
#winter .tree,
#winter .morning,
#winter .afternoon {
    transition: .2s all ease-in;
}

#winter.moving .view,
#winter.moving .tree,
#winter.moving .morning,
#winter.moving .afternoon {
    transition: none;
}

#winter .window-cover {
    opacity: calc((var(--percentage) - 0.9) / 0.1);
}
</style>
